<template>
	<u-list :height="screenHeight">
	<view>
		
		<view class="HPVData">
			<view class="hpv-left">
				<view class="hpv-type">{{ HPVData.name }}</view>
				<view class="hpv-age">
					<u-tag :text="HPVData.describe[0]" size="mini" plain></u-tag>
					<u-tag :text="HPVData.describe[1]" size="mini" plain type="success"></u-tag>
				</view>
			</view>
			<view class="hpv-right">
				<view class="hpv-price">￥: {{ HPVData.price[0] }}-{{ HPVData.price[1] }}</view>
			</view>
		</view>
		<!-- 预约表单 -->
		<view class="HPV-form">
			<u-form labelPosition="left" ref="form" :rules="rules" :model="HPVForm">
				<u-form-item label="姓名:" borderBottom prop="userInfo.name">
					<u--input placeholder="请输入姓名" border="none" v-model="HPVForm.userInfo.name"></u--input>
				</u-form-item>
				<u-form-item label="身份证:" labelWidth="60" borderBottom prop="userInfo.userId" ref="item1">
					<u--input placeholder="请输入身份证" border="none" v-model="HPVForm.userInfo.userId"></u--input>
				</u-form-item>
				<u-form-item label="性别:" borderBottom @click="sexShow = true">
					<u--input disabled disabledColor="#ffffff" v-model="HPVForm.userInfo.sex" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="出生日期:" labelWidth="70" borderBottom @click="birthdayDataShow = true">
					<u--input disabled disabledColor="#ffffff" v-model="HPVForm.userInfo.birthdayData" placeholder="请选择出生日期" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号:" labelWidth="60" borderBottom prop="userInfo.phone">
					<u--input placeholder="请输入手机号" border="none" v-model="HPVForm.userInfo.phone"></u--input>
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 套餐选择 -->
		<view class="hpvMeal" >
			<!-- 套餐 -->
			<text class="hpvMeal-title">{{HPVMealList.title}}</text>
			<view class="hpvMeal-list">
				<text v-for="(item,index) in HPVMealList.name" :key="index"
				:class="index == mealFlag?'active':''"
				 @click="changeMeal(item.combo_id,index)">{{item.combo}}</text>
			</view>
			<!-- 接种时间 -->
			<text class="hpvMeal-title">{{HPVDoDate.title}}</text>
			<view class="hpvMeal-list">
				<text v-for="(item,index) in HPVDoDate.name" :key="index"
				:class="index == mealPriceFlag?'active':''"
				 @click="changeDoDate(item.time_id,index)">{{item.time}}</text>
			</view>
		</view>
		<!-- 底部提交 -->
		<view class="sub-box">
			<view class="sum">合计 : 1000</view>
			<view>
				<u-button type="primary" text="提交" @click="submitData"></u-button>
			</view>
		</view>

		<!-- 性别弹框 -->
		<u-action-sheet :show="sexShow" :actions="actions" title="请选择性别" @close="sexShow = false" @select="sexSelect"></u-action-sheet>
		 <!-- 出生日期弹框 -->
		<u-datetime-picker
			:minDate="-28800000"
			@close="birthdayDataClose"
			@cancel="birthdayDataCancel"
			@confirm="birthdayDataConfirm"
			closeOnClickOverlay
			:maxDate="1667577600000"
			:show="birthdayDataShow"
			mode="date"
		></u-datetime-picker>
	</view>
	</u-list>
</template>

<script>
import moment from 'moment';
import {getHPVMealApi,getHPVMealPriceApi} from "../../../utils/api.js"
export default {
	data() {
		return {
			// 上方显示的hpv数据
			HPVData: {},
			// 表单的值
			HPVForm: {
				userInfo: {
					name: '',
					userId: '',
					sex: '',
					birthdayData: '',
					phone: ''
				}
			},
			// 套餐详情
			HPVMealList:{},
			// 接种时间
			HPVDoDate:{},
			// active的标识
			mealFlag:0,
			mealPriceFlag:0,
			// 校验规则
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.userId': {
					type: 'string',
					min: 18,
					max: 18,
					required: true,
					message: '请填写正确的身份证号码',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': {
					type: 'string',
					min: 11,
					max: 11,
					required: true,
					message: '请填写正确的手机号码',
					trigger: ['blur', 'change']
				}
			},
			// 性别选项
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				}
			],
			// 弹框的显示
			sexShow: false,
			birthdayDataShow: false,
			// 页面高度
			screenHeight:0,
			changeHPVObj:{
				hpv_id:'',
				combo_id:'',
				time_id:''
			}
		};
	},
	methods: {
		// 获取套餐详情
		async getHPVMeal(){
			const res = await getHPVMealApi()
			console.log(res);
			this.HPVMealList = res.data[0]
			this.HPVDoDate = res.data[1]
		},
		//选择年龄
		sexSelect(e) {
			this.HPVForm.userInfo.sex = e.name;
			// this.$refs.form1.validateField('userInfo.sex');
		},
		// 出生日期的方法操作
		birthdayDataClose() {
			this.birthdayDataShow = false;
		},
		birthdayDataCancel() {
			this.birthdayDataShow = false;
		},
		birthdayDataConfirm(e) {
			this.HPVForm.userInfo.birthdayData = moment(e.value).format('YYYY-MM-DD');
			this.birthdayDataShow = false;
		},
		// 提交表单数据
		submitData() {
			this.$refs.form
				.validate()
				.then(res => {
					uni.$u.toast('校验通过');
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		},
		// 套餐的切换事件
		changeMeal(id,index){
			this.mealFlag = index
			this.changeHPVObj.combo_id = id
		},
		//接种时间的切换事件
		changeDoDate(id,index){
			console.log(id);
			this.mealPriceFlag = index
			this.changeHPVObj.time_id = id
		},
		//请求套餐价格
		async getHPVMealPrice(){
			console.log(this.changeHPVObj);
			const res = await getHPVMealPriceApi(this.changeHPVObj)
			console.log(res);
		}
	},
	watch:{
		changeHPVObj:{
			handler(newValue){
				this.getHPVMealPrice()
			},
			deep:true,
			immediate:true
		}
	},
	onLoad(req) {
		// console.log(JSON.parse(req.HPV));
		this.HPVData = JSON.parse(req.HPV);
		this.changeHPVObj.hpv_id = this.HPVData.id
	},
	mounted(){
		this.getHPVMeal()
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 50; //获取当前页面的高度
	}
};
</script>

<style lang="less">
page {
	background-color: #fafafa;
}
.HPVData {
	background-color: #ffffff;
	// margin: 20rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	border-radius: 20rpx;
	.hpv-type {
		font-size: 35rpx;
	}
	.hpv-age {
		display: flex;
		align-items: center;
		padding: 7rpx;
		font-size: 25rpx;
		margin: 10rpx 10rpx 10rpx 0;
	}
	.u-transition {
		margin-right: 20rpx;
	}
	.hpv-right {
		display: flex;
		align-items: center;
	}
	.hpv-price {
		font-weight: bold;
		color: #ff5f2c;
	}
}
.HPV-form {
	background-color: #ffffff;
	padding: 10rpx;
	margin: 10rpx 0;
	.u-form-item {
		margin: 14rpx 0;
	}
}
// 套餐
.hpvMeal{
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx 0;
  .hpvMeal-title{
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  .hpvMeal-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	text{
	  padding:16rpx;
	  background-color: #f5f5f5;
	  margin: 0 20rpx 20rpx 0;
	  border-radius: 10rpx;
	  display: block;
	}
	// 选中
	 .active{
	   background-color: #2c76ef !important;
	   color: #ffffff !important;
	 }
  }
}
// 底部提交
.sub-box{
	 background-color: #ffffff;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-top: 1rpx #f5f5f5 solid;
	  padding: 0 26rpx;
	  height: 100rpx;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  .sum{
		  color: #ea7843;
	  }
	  .u-button{
			height: 60rpx !important;
	  }
}
</style>
